<div id="header" ng-controller="NavigationController" ng-init="getNavData();modalOpened=false;section='';subsection=''">
  <div class="navbar navbar-static-top navbar-main" role="navigation">
    <div class="container">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#omni-navbar">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="/"><img src="/assets/img/logo-rebrand.png" alt="omni"></a>
      </div>
      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="hidden-xs">
        <ul class="nav navbar-nav navbar-right">
          <li ng-hide="account.loggedIn">
            <button href="#" ng-click="modalManager.openCreateModal()" class="btn btn-warning">{{ 'NAVIGATION.CREATE' | translate }}</button>
          </li>
          <li ng-hide="account.loggedIn">
            <a href="#" ng-click="modalManager.openLoginModal()">{{ 'COMMON.LOGIN' | translate }}</a>
          </li>
          <li class="divider-vertical" ng-hide="account.loggedIn"></li>
          <li ng-show="account.loggedIn" ng-class="{active:section=='wallet'}">
            <a href="/wallet/overview" ng-click="section='wallet';subsection='overview'">{{ 'NAVIGATION.WALLET' | translate }} <span class="glyphicon glyphicon-chevron-down"></span></a>
          </li>
          <li ng-class="{active:section=='exchange'}">
            <a href="/dex/overview" ng-click="section='exchange';subsection='omnidex'">{{'NAVIGATION.EXCHANGE' | translate}} <span class="glyphicon glyphicon-chevron-down"></span></a>
          </li>
          <li ng-class="{active:section=='explorer'}">
            <a href="/explorer/overview" ng-click="section='explorer';subsection='transactions'">{{'NAVIGATION.EXPLORER' | translate}} <span class="glyphicon glyphicon-chevron-down"></span></a>
          </li>
          <li ng-class="{active:section=='about'}">
            <a href="/about/omniwallet" ng-click="section='about';subsection='omniwallet'">{{'NAVIGATION.ABOUT' | translate}} <span class="glyphicon glyphicon-chevron-down"></span></a>
          </li>
          <li ng-show="account.loggedIn" class="dropdown" dropdown>
            <a href class="dropdown-toggle" dropdown-toggle>
              {{'NAVIGATION.ACCOUNT' | translate}} <span class="glyphicon glyphicon-chevron-down"></span>
            </a>
            <ul class="dropdown-menu" role="menu">
              <li><a ng-click="section='account'" href="/wallet/settings">{{'NAVIGATION.SETTINGS' | translate}}</a></li>
              <li><a href="/" ng-click="logout(); section='';">{{'NAVIGATION.LOGOUT' | translate}}</a></li>
            </ul>
        </ul>
        <div class="arrow_box" ng-hide="section==''" ng-class="{'login':account.loggedIn, 'wallet':section=='wallet', 'exchange':section=='exchange', 'explorer':section=='explorer', 'about':section=='about'}"></div>
      </div>
      <div class="visible-xs">
        <div class="collapse navbar-collapse" id="omni-navbar">
          <ul class="nav nav-stacked">
            <li ng-if="account.loggedIn" class="navbar-header">{{ 'NAVIGATION.WALLET' | translate }}</li>
            <li ng-if="account.loggedIn" ng-class="{active:subsection=='overview'}"><a ng-click="subsection='overview'" href="/wallet/overview">{{'COMMON.OVERVIEW' | translate }}</a></li>
            <li ng-if="account.loggedIn" ng-class="{active:subsection=='myaddresses'}"><a ng-click="subsection='myaddresses'" href="/wallet/addresses">{{ 'NAVIGATION.ADDRESSES' | translate }}</a></li>
            <li ng-if="account.loggedIn" ng-class="{active:subsection=='myassets'}"><a ng-click="subsection='myassets'" href="/wallet/assets">{{ 'NAVIGATION.ASSETS' | translate }}</a></li>
            <li ng-if="account.loggedIn" ng-class="{active:subsection=='history'}"><a ng-click="subsection='history'" href="/wallet/history">{{'COMMON.HISTORY' | translate}}</a></li>
            <li ng-if="account.loggedIn" ng-class="{active:subsection=='send'}"><a ng-click="section='wallet';subsection='send'" href="/wallet/send">{{ 'COMMON.SEND' | translate }}</a></li>
            <li class="navbar-header">{{'NAVIGATION.EXCHANGE' | translate}}</li>
            <li ng-class="{active:subsection=='omnidex'}"><a ng-click="subsection='trade'" href="/dex/overview">{{'NAVIGATION.OMNIDEX' | translate}}</a></li>
            <li ng-class="{active:subsection=='trade'}"><a ng-click="subsection='trade'" href="/exchange/trade">{{'NAVIGATION.DEX1' | translate}}</a></li>
            <li ng-if="account.loggedIn" ng-class="{active:subsection=='myoffers'}"><a ng-click="subsection='myoffers'" href="/exchange/myoffers">{{'COMMON.MY' | translate}} {{'NAVIGATION.DEX1' | translate}} {{'NAVIGATION.OFFERS' | translate}}</a></li>
            <li class="navbar-header">{{'NAVIGATION.EXPLORER' | translate}}</li>
            <li ng-class="{active:subsection=='transactions'}"><a ng-click="subsection='transactions'" href="/explorer/overview">{{'NAVIGATION.TRANSACTIONS' | translate}}</a></li>
            <li ng-class="{active:subsection=='assets'}"><a ng-click="subsection='assets'" href="/explorer/assets">{{'NAVIGATION.EXPLOREASSETS' | translate}}</a></li>
            <li ng-class="{active:subsection=='crowdsales'}"><a ng-click="subsection='crowdsales'" href="/explorer/crowdsales">{{'COMMON.ACTIVECROWDSALES' | translate}}</a></li>
            <li class="navbar-header">{{'NAVIGATION.ABOUT' | translate}}</li>
            <li ng-class="{active:subsection=='omniwallet'}"><a ng-click="subsection='omniwallet'" href="/about/omniwallet">{{'NAVIGATION.ABOUTOMNIWALLET' | translate}}</a></li>
            <li ng-class="{active:subsection=='mastercoin'}"><a ng-click="subsection='mastercoin'" href="/about/omni">{{'NAVIGATION.ABOUTOMNI' | translate}}</a></li>
            <li ng-class="{active:subsection=='faq'}"><a ng-click="subsection='faq'" href="/about/faq">{{'NAVIGATION.FAQ' | translate}}</a></li>
            <li ng-class="{active:subsection=='contact'}"><a ng-click="subsection='contact'" href="/about/contact">{{'NAVIGATION.CONTACT' | translate}}</a></li>
            <li ng-if="account.loggedIn" class="navbar-header">{{'NAVIGATION.ACCOUNT' | translate}}</li>
            <li ng-if="account.loggedIn" ng-class="{active:section=='account'}"><a ng-click="section='account'" href="/wallet/settings">{{'NAVIGATION.SETTINGS' | translate}}</a></li>
            <li ng-if="account.loggedIn"><a href="/" ng-click="logout()">{{'NAVIGATION.LOGOUT' | translate}}</a></li>
          </ul>
        </div>
      </div>  
    </div>
  </div>
  <div class="navbar navbar-static-top navbar-main-tier1 hidden-xs" role="navigation" collapse="section==''">
    <div id="wallet-navbar" ng-if="section=='wallet'">
      <ul class="nav navbar-nav">
        <li ng-class="{active:subsection=='overview'}"><a ng-click="subsection='overview'" href="/wallet/overview">{{'COMMON.OVERVIEW' | translate }}</a></li>
        <li ng-class="{active:subsection=='myaddresses'}"><a ng-click="subsection='myaddresses'" href="/wallet/addresses">{{ 'NAVIGATION.ADDRESSES' | translate }}</a></li>
        <li ng-class="{active:subsection=='myassets'}"><a ng-click="subsection='myassets'" href="/wallet/assets">{{'NAVIGATION.ASSETS' | translate}}</a></li>
        <li ng-class="{active:subsection=='history'}"><a ng-click="subsection='history'" href="/wallet/history">{{'COMMON.HISTORY' | translate}}</a></li>
        <li ng-class="{active:subsection=='send'}"><a ng-click="subsection='send'" href="/wallet/send">{{ 'COMMON.SEND' | translate }}</a></li>
      </ul>
    </div>
    <div id="exchange-navbar" ng-if="section=='exchange'">
      <ul class="nav navbar-nav">
        <li ng-class="{active:subsection=='omnidex'}"><a ng-click="subsection='omnidex'" href="/dex/overview">{{'NAVIGATION.OMNIDEX' | translate}}</a></li>
        <li ng-class="{active:subsection=='trade'}"><a ng-click="subsection='trade'" href="/exchange/trade">{{'NAVIGATION.DEX1' | translate}}</a></li>
        <li ng-show="account.loggedIn" ng-class="{active:subsection=='myoffers'}"><a ng-click="subsection='myoffers'" href="/exchange/myoffers">{{'COMMON.MY' | translate}} {{'NAVIGATION.DEX1' | translate}} {{'NAVIGATION.OFFERS' | translate}}</a></li>
      </ul>
    </div>
    <div id="explorer-navbar" ng-if="section=='explorer'">
      <ul class="nav navbar-nav">
        <li ng-class="{active:subsection=='transactions'}"><a ng-click="subsection='transactions'" href="/explorer/overview">{{'NAVIGATION.TRANSACTIONS' | translate}}</a></li>
        <li ng-class="{active:subsection=='assets'}"><a ng-click="subsection='assets'" href="/explorer/assets">{{'NAVIGATION.EXPLOREASSETS' | translate}}</a></li>
        <li ng-class="{active:subsection=='crowdsales'}"><a ng-click="subsection='crowdsales'" href="/explorer/crowdsales">{{'COMMON.ACTIVECROWDSALES' | translate}}</a></li>
      </ul>
    </div>
    <div id="about-navbar" ng-if="section=='about'">
      <ul class="nav navbar-nav">
        <li ng-class="{active:subsection=='omniwallet'}"><a ng-click="subsection='omniwallet'" href="/about/omniwallet">{{'NAVIGATION.ABOUTOMNIWALLET' | translate}}</a></li>
        <li ng-class="{active:subsection=='mastercoin'}"><a ng-click="subsection='mastercoin'" href="/about/omni">{{'NAVIGATION.ABOUTOMNI' | translate}}</a></li>
        <li ng-class="{active:subsection=='faq'}"><a ng-click="subsection='faq'" href="/about/faq">{{'NAVIGATION.FAQ' | translate}}</a></li>
        <li ng-class="{active:subsection=='contact'}"><a ng-click="subsection='contact'" href="/about/contact">{{'NAVIGATION.CONTACT' | translate}}</a></li>
      </ul>
    </div>
  </div>
</div>
